<template>
    <van-tabbar route v-if="visible">
        <van-tabbar-item to="/home">
            <template #icon>
                <van-icon name="wap-home-o" />
            </template>
            首页
        </van-tabbar-item>
        <van-tabbar-item to="/category">
            <template #icon>
                <van-icon name="cluster-o" />
            </template>
            分类
        </van-tabbar-item>
        <van-tabbar-item to="/cart">
            <template #icon>
                <van-icon name="shopping-cart-o" />
            </template>
            购物车
        </van-tabbar-item>
        <van-tabbar-item to="/user">
            <template #icon>
                <van-icon name="user-o" />
            </template>
            我的
        </van-tabbar-item>
    </van-tabbar>
</template>
<script setup>
//调用useRoute这个函数可以获取route这个对象，对象有path属性，表示当前的路径
const route = useRoute();
const visible = ref(false);
watchEffect(()=>{
    //如果当前用户正在访问的路径在这四个路径中，则显示此Tabbar,否则不显示
    //当route.path发生变化时，会重新执行此函数计算最新的visible
    visible.value = ['/home','/category','/cart','/user'].includes(route.path)
});
</script>